<template>
    <div class="order" :style="styleDiv">
    	<div class="top">
    		<ul class="clearfix" :style="styleUl">
				<li :style="styleli" :class="{current: flag == index}" @click="flag=index" v-for="(item,index) in type">
					<span>{{item}}</span>
				</li>
    		</ul>
    	</div>
    	<ul class="orderAggregate">
    		<li @click="$router.push('/jobDetail')" v-for="(item,index) in orders">
    			<div class="up">
    				<div class="left">
    					<img :src="item.img" alt="">
    					<span>{{item.distance}}km</span>
    				</div>
    				<div class="right">
    					<div class="head clearfix"><h2>{{item.title}}</h2><span>{{item.type}}</span><i>{{item.time}}</i></div>
    					<div class="center clearfix"><p>{{item.data}}</p><i class="iconfont icon-fenxiang"></i></div>
    					<div class="foot clearfix"><span v-show="item.zeren">责任险</span><span v-show="item.chengxin">诚信险</span><div>{{item.price}}<em>&nbsp;元/天</em></div></div>
    				</div>
    			</div>
    			<div class="down clearfix">
    				<div>打零工：<span>{{item.dlg}}</span>&ensp;好评率：<span>{{item.hpl}}%</span>&ensp;招人：<span>{{item.people}}人</span></div>
    				<span>接单</span>
    			</div>
    		</li>
    	</ul>
    </div>
</template>

<script>
export default {
    name: 'order',
    data(){
    	return{
    		type:["家政装修","心理咨询","校园兼职","活动主持","代办跑腿","教育培训","搬家速运"],
    		styleDiv:{ height: '100%'},
    		styleUl: { width: '400px'},
    		styleli: { width: '400px'},
    		flag:0,
    		orders:[
    			{
    				img:"./static/images/a.jpg",
    				distance:13.5,
    				title:"资深电工",
    				type:"室内装修设计",
    				time:"刚刚",
    				data:"02-17至02-18 9:00-19:00",
    				zeren:true,
    				chengxin:true,
    				price:150,
    				dlg:36.5,
    				hpl:100,
    				people:24
    			},
    			{
    				img:"./static/images/a.jpg",
    				distance:13.5,
    				title:"资深电工",
    				type:"室内装修设计",
    				time:"刚刚",
    				data:"02-17至02-18 9:00-19:00",
    				zeren:true,
    				chengxin:true,
    				price:150,
    				dlg:36.5,
    				hpl:100,
    				people:24
    			},
    			{
    				img:"./static/images/a.jpg",
    				distance:13.5,
    				title:"资深电工",
    				type:"室内装修设计",
    				time:"刚刚",
    				data:"02-17至02-18 9:00-19:00",
    				zeren:true,
    				chengxin:true,
    				price:150,
    				dlg:36.5,
    				hpl:100,
    				people:24
    			}
    		]
    	}
    },
    methods:{
    	typeScroll(){
    		let pageWidth = window.innerWidth;
    		let pageHeight = window.innerHeight;
    		let typeNumbers = this.type.length;
    		let each_li = pageWidth / 4;
    		this.styleUl.width = typeNumbers*each_li+"px";
    		this.styleli.width = each_li+"px";
    		this.styleDiv.height = pageHeight+"px";
    	}
    },
    mounted(){
    	this.typeScroll()
    	var _this = this;
    	window.onresize = function(){
    		_this.typeScroll()
    	};

    },
}
</script>

<style scoped>
.order{
	background-color: #F7F7F7;
}
.top{
	height: 40px;
	background-color: #fff;
	overflow-x:auto;
}
.top ul{
	height: 40px;
}
.top ul li{
	float: left;
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.top ul li span{
	height: 39px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	border-bottom: 1px solid #fff;
	display: inline-block;
}
.top ul li.current span{
	color: #ffb452;
	border-bottom: 1px solid #ffb452;
}
.orderAggregate li{
	background-color: #fff;
	padding: 12px 16px;
	padding-bottom: 0;
	margin-top: .6rem;
}
.up{
	border-bottom: 1px solid #F1F1F1;
	padding-left: 60px;
	padding-bottom: 14px;
	position: relative;
}
.left{
	position: absolute;
	left: 0;
	top: 0;
}
.left img{
	width: 40px;
	height: 40px;
	border-radius: 2px;
}
.left span{
	font-size: 12px;
	color: #ccc;
	margin-top: 4px;
	display: block;
}
.head,.center{
	height: 20px;
	line-height: 20px;
	margin-bottom: 10px;
}
.head h2{
	font-size: 16px;
	font-weight: normal;
	float: left;
}
.head span{
	font-size: 14px;
	color: #999;
	float: left;
	margin-left: 10px;
}
.head i{
	font-size: 12px;
	color: #999;
	float: right;
}
.center p{
	color: #999;
	font-size: 13px;
	float: left;
}
.center i{
	float: right;
  font-size: 1.2rem;
  padding-right: .4rem;
  color:#999;
}
.foot span{
	font-size: 12px;
	color: #fff;
	padding: 2px 6px;
	border-radius: 5em;
	background-color: #FFA100;
	float: left;
	margin-right: 12px;
}
.foot span:nth-child(2){
	background-color: #5BBBFF;
}
.foot div{
	font-size: 16px;
	color: #E91717;
	float: right;
}
.foot div em{
	font-size: 12px;
	font-style: normal;
}
.down{
	height: 45px;
	line-height: 45px;
	font-size: 12px;
	color: #999;
}
.down div{
	float: left;
}
.down div span{
	color: #FFA100;
}
.down>span{
	width: 50px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 14px;
	color: #FFA811;
	border:1px solid #FFA811;
	border-radius: 5em;
	float: right;
	margin-top: 10px;
}
</style>
